<template>
  <k-form-modal
    ref="formRef"
    width="middle"
    drawer
    :title="state.mode === 1?'编辑折扣活动':'创建折扣活动'"
    label-width="90px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="选择讲师" prop="agent_id">
      <el-select v-model="state.model.agent_id" placeholder="不限" filterable style="width: 100%">
        <el-option
          v-for="item in list"
          :key="item.agent_id"
          :label="item.name"
          :value="item.agent_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="会员版本"
      prop="vip_level"
    >
      <el-radio-group v-model="state.model.vip_level">
        <el-radio
          v-for="item in vipLevelOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="活动折扣"
      prop="discount"
    >
      <el-input-number
        v-model="state.model.discount"
        placeholder="请输入0.1-0.99区间折扣"
        clearable
        :max="0.99"
        :min="0.1"
        :step="0.1"
        controls-position="right"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="失效时间" prop="invalid_time">
      <el-date-picker
        v-model="state.model.invalid_time"
        type="datetime"
        value-format="X"
        placeholder="请选择日期"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="活动图" prop="banner_url">
      <KImageUploader
        ref="uploadRef"
        :file-list="fileList"
        :limit="1"
        :on-before-upload="onBeforeUpload"
      >
      </KImageUploader>
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, watch, nextTick } from 'vue';
import { useFormModal } from '@crud/index';
import { KImageUploader } from '@/components/k-image-uploader';
import { addDiscount, updateDiscount } from '@/api/crm-agency/kgj/lecturer';
import { ElMessage } from 'element-plus';
defineOptions({
  name: 'LecturerListAddEditModal'
});
interface Props {
  list?: any[]
}
withDefaults(defineProps<Props>(), ({
  list: () => {
    return [];
  }
}));
const vipLevelOptions = [
  {
    label: '轻享版',
    value: 10
  },
  {
    label: '旗舰版',
    value: 20
  },
  {
    label: '至尊版',
    value: 30
  }
];
const emits = defineEmits(['success']);
let fileList= ref<Record<string, any>[]>([]);
const formRef = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  // formRef,
  model: {
    discount: 1,
    vip_level: 10,
    agent_id: undefined,
    banner_url: undefined,
    discount_id: undefined,
    invalid_time: undefined
  },
  rules: {
    banner_url: [{ required: true, message: '请先上传图片' }],
    agent_id: [{ required: true, message: '请选择讲师' }],
    invalid_time: [{ required: true, message: '请选择失效日期' }]
  },
  onShow: (mode = 0, data: any) => {
    fileList.value = [];

    if (data) {
      state.model = {
        discount: data.discount,
        vip_level: data.vip_level,
        agent_id: data.agent_id,
        banner_url: data.banner_url || undefined,
        discount_id: data.discount_id,
        invalid_time: data.invalid_time
      };
      fileList.value = [{
        uid: -1,
        name: data.banner_url,
        url: data.banner_url
      }
      ];
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    const params = { ...model, banner_url: model?.banner_url?.url?model.banner_url.url : model.banner_url };
    const res = mode === 1 ? await updateDiscount(params) : await addDiscount(params);
    if (!res.err) {
      const { data } = res;
      if (data.success) {
        ElMessage.success(mode===1 ? '编辑成功': '新增成功');
        emits('success');
      } else ElMessage.warning(data.message || '操作失败');
    }
    return res;
  }
});
const uploadRef = ref();
const onBeforeUpload = (file: any) => {
  const { size } = file;
  if (size > 1024 * 1024 * 5) {
    ElMessage.error('请上传5M以下的图片');
    return false;
  }
  return true;
};
watch(() => uploadRef?.value?.getImgUrl(),
  (val) => {
    const imageUrl = state.model.banner_url;
    state.model.banner_url = val;
    nextTick(() => {
      if (val || (val !== imageUrl&& val === undefined)) formRef?.value.validateField('banner_url');
    });
  },
  {
    immediate: false
  });
defineExpose({
  show: methods.show
});
</script>
<style scoped>
.mr-10 {
  margin-right: 10px
}
</style>
